<template>
  <div class="main-box">
    <el-form :inline="true" :model="dataForm" :rules="dataRule" ref="dataForm">
      <el-form-item>
        <el-date-picker v-model="dataForm.date" style="width: 160px" type="date" size="medium" placeholder="请假日期" clearable="clearable"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-select v-model="dataForm.type" class="input" placeholder="类型" size="medium" clearable="clearable">
          <el-option label="病假" value="0"></el-option>
          <el-option label="事假" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="dataForm.status" class="input" placeholder="状态" size="medium" clearable="clearable">
          <el-option label="请假中" value="0"></el-option>
          <el-option label="不同意" value="2"></el-option>
          <el-option label="已同意" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item><el-button @click="searchHandle()" type="primary" size="medium">查询</el-button></el-form-item>
    </el-form>

    <el-table :data="dataList" border="border" v-loading="dataListLoading" style="width: 100%" size="medium">
      <el-table-column width="40px" prop="leave_reason" header-align="center" align="center" type="expand">
        <template #default="scope">
          请假原因：{{ scope.row.leave_reason }}
        </template>
      </el-table-column>
      <el-table-column type="index" header-align="center" align="center" width="100" label="序号">
        <template #default="scope">
          <span>{{ (pageIndex - 1) * pageSize + scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="user_name" header-align="center" align="center" label="姓名" min-width="150"></el-table-column>
      <el-table-column prop="communityName" header-align="center" align="center" label="社团" min-width="150"></el-table-column>
      <el-table-column prop="leave_title" header-align="center" align="center" label="请假标题" min-width="150"></el-table-column>
      <el-table-column prop="start" header-align="center" align="center" label="起始" min-width="180"></el-table-column>
      <el-table-column prop="end" header-align="center" align="center" label="截止" min-width="180"></el-table-column>
      <el-table-column prop="leave_type" header-align="center" align="center" label="请假类型" min-width="150"></el-table-column>
      <el-table-column prop="leave_status" header-align="center" align="center" label="请假状态" min-width="120">
        <template #default="scope">
          <span v-if="scope.row.leave_status == '请假中'" style="color: orange">{{ scope.row.leave_status }}</span>
          <span v-if="scope.row.leave_status == '已同意'" style="color: #17b3a3">{{ scope.row.leave_status }}</span>
          <span v-if="scope.row.leave_status == '不同意'" style="color: #f56c6c">{{ scope.row.leave_status }}</span>
        </template>
      </el-table-column>

      <el-table-column header-align="center" align="center" width="150" label="操作" min-width="120">
        <template #default="scope">
          <el-button type="text" size="medium" :disabled="scope.row.leave_status != '请假中'" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
          <el-button type="text" size="medium" :disabled="scope.row.leave_status == '已同意'" @click="deleteHandle(scope.row.leave_id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="pagination-box"
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50]"
      :page-size="pageSize"
      :total="totalCount"
      layout="total, sizes, prev, pager, next, jumper"
    ></el-pagination>

    <!--编辑弹窗-->
    <div class="exit-box">
      <el-dialog title="编辑" :visible.sync="dialogEditFormVisible">
        <el-form ref="userInfoForm" :model="row">
          <el-form-item label="学号" :label-width="formLabelWidth" prop="stuId">
            <el-input v-model="row.stuId" autocomplete="off" placeholder="学号或工号" name="userId" disabled />
          </el-form-item>
          <el-form-item label="请假社团" :label-width="formLabelWidth" prop="clubId">
            <el-select v-model="row.clubId" class="input" placeholder="社团" size="medium">
              <el-option v-for="one in deptList" :key="one.communityId" :label="one.communityName" :value="one.communityId" />
            </el-select>
          </el-form-item>
          <el-form-item label="请假标题" :label-width="formLabelWidth" prop="leave_title"><el-input v-model="row.leave_title" autocomplete="off" /></el-form-item>
          <el-form-item label="请假理由" :label-width="formLabelWidth" prop="leave_reason"><el-input v-model="row.leave_reason" autocomplete="off" /></el-form-item>
          <el-form-item label="请假开始时间" :label-width="formLabelWidth" prop="start">
            <el-date-picker v-model="row.start" style="width: 160px" type="date" size="medium" placeholder="请假日期"></el-date-picker>
            &nbsp;&nbsp;&nbsp;<el-time-picker placeholder="选择时间"  v-model="row.start" style="width: 160px"></el-time-picker>
          </el-form-item>
          <el-form-item label="请假结束时间" :label-width="formLabelWidth" prop="end">
             <el-date-picker v-model="row.end" style="width: 160px" type="date" size="medium" placeholder="请假日期"></el-date-picker>
             &nbsp;&nbsp;&nbsp; <el-time-picker placeholder="选择时间" v-model="row.end" style="width: 160px"></el-time-picker>
          </el-form-item>
          <el-form-item label="请假类型" :label-width="formLabelWidth" prop="leave_type">
            <el-select v-model="row.leave_type" class="input" placeholder="类型" size="medium">
              <el-option label="病假" value="0"></el-option>
              <el-option label="事假" value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogEditFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="updateUserInfo">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs';
import localStorageUtil from '../../../utils/localStorageUtil';

export default {
  data: function() {
    return {
      currentUser: localStorageUtil.read('SET_USER'),
      totalCount: 10,
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      dataForm: {
        //用于模糊搜索
        deptId: null,
        date: null,
        type: null,
        status: null
      },
      dataList: [],
      deptList: [],
      /* 编辑弹窗控制*/
      dialogEditFormVisible: false,
      /* 当前选中这一行的数据*/
      row: {},
      /* label 宽度*/
      formLabelWidth: '120px',
      dataRule: {
        name: [
          {
            required: false,
            pattern: '^[\u4e00-\u9fa5]{1,10}$',
            message: '姓名格式错误'
          }
        ]
      }
    };
  },
  methods: {
    loadDeptList: function() {
      let that = this;
      //		that.$http('dept/searchAllDept', 'GET', null, true, function(resp) {
      this.$store.dispatch('community/findAll').then(resp => {
        console.log(resp);
        that.deptList = resp.data;
      });
    },
    loadDataList: function() {
      let that = this;
      that.dataListLoading = true;
      let params = {
        userId: that.currentUser.userId,
        name: that.dataForm.name,
        deptId: that.dataForm.deptId,
        date: that.dataForm.date,
        type: that.dataForm.type,
        status: that.dataForm.status,
        page: that.pageIndex,
        length: that.pageSize
      };
      if (that.dataForm.date != null && that.dataForm.date != '') {
        params.date = dayjs(that.dataForm.date).format('YYYY-MM-DD');
      }
      //that.$http('leave/searchLeaveByPage', 'POST', data, true, function(resp) {
      this.$store.dispatch('leave/searchLeaveByPage', params).then(resp => {
        console.log(resp);
        let page = resp.data;
        for (let one of page.list) {
          if (one.leave_type == 0) {
            one.leave_type = '病假';
          } else if (one.leave_type == 1) {
            one.leave_type = '事假';
          }
          if (one.leave_status == 0) {
            one.leave_status = '请假中';
          } else if (one.leave_status == 2) {
            one.leave_status = '不同意';
          } else if (one.leave_status == 1) {
            one.leave_status = '已同意';
          }
        }
        that.dataList = page.list;
        that.totalCount = page.totalCount;
        that.dataListLoading = false;
      });
    },
    sizeChangeHandle: function(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.loadDataList();
    },
    currentChangeHandle: function(val) {
      this.pageIndex = val;
      this.loadDataList();
    },
    searchHandle: function() {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          this.$refs['dataForm'].clearValidate();
          if (this.dataForm.name == '') {
            this.dataForm.name = null;
          }
          if (this.pageIndex != 1) {
            this.pageIndex = 1;
          }
          this.loadDataList();
        } else {
          return false;
        }
      });
    },

    deleteHandle: function(deleteId) {
      let that = this;
      console.log(deleteId);
      that
        .$confirm(`确定要删除选中的记录？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        .then(() => {
          //			that.$http('leave/deleteLeaveById', 'POST', data, true, function(resp) {
          this.$store.dispatch('leave/deleteLeaveById', deleteId).then(resp => {
            console.log(resp);
            if (resp.code == 200) {
              that.$message({
                message: '删除成功',
                type: 'success',
                duration: 600
              });
              that.loadDataList();
            } else {
              that.$message({
                message: '未能删除记录',
                type: 'warning',
                duration: 600
              });
            }
          });
        });
    },
    //修改
    /* 编辑触发弹窗*/
    handleEdit(index, row) {
      this.row = row;
      this.dialogEditFormVisible = true;
      console.log(row);
    },
    /* 修改用户信息*/
    updateUserInfo() {
      if (this.row.leave_type == '病假') {
        this.row.leave_type = 0;
      } else if (this.row.leave_type == '事假') {
        this.row.leave_type = 1;
      }
      console.log(this.row.start);
      /**解决丢失8小时的问题 */
      this.row.start = dayjs(this.row.start).add(8,'hours');
      this.row.end = dayjs(this.row.end).add(8,'hours');
      this.$store.dispatch('leave/updateLeaveInfo', this.row).then(res => {
        if (res.code === 200) {
          this.$message({
            message: '修改成功',
            type: 'success'
          });
        }
        this.dialogEditFormVisible = false;
        this.loadDataList();
      });
    }
  },

  created: function() {
    this.loadDeptList();
    this.loadDataList();
  }
};
</script>

<style scoped>
.main-box {
  margin: 2% 2%;
}
.pagination-box {
  margin: 4% 30%;
}
</style>
